<template>
  <div class="app-container">
    <el-dialog
      title="编辑医生"
      :before-close="handleClose"
      :visible="editing" >
      <el-form   label-width="80px"  v-model="editmodel">
        <el-form-item label="名称">
          <el-input v-model="editmodel.name"></el-input>
        </el-form-item>
        <el-form-item label="真实姓名">
          <el-input v-model="editmodel.realname"></el-input>
        </el-form-item>
        <el-form-item label="所在部门">
          <el-input v-model="editmodel.subject"></el-input>
        </el-form-item>
        <el-form-item label="所在医院">
          <el-select v-model="editmodel.hid" placeholder="请选择">
            <el-option
              v-for="item in hosptiallist"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="editmodel.password"></el-input>
        </el-form-item>
        <el-form-item label="操作">
          <el-button class="el-button--success" @click="doupdatedoctor">保存</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="医生姓名">
        <el-input v-model="formInline.realname" placeholder="真实姓名"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="dosearch">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column align="center" label="ID" width="95">
        <template slot-scope="scope">
          {{ scope.$index }}
        </template>
      </el-table-column>
      <el-table-column label="名称">
        <template slot-scope="scope">
        {{scope.row.name}}
        </template>
      </el-table-column>

      <el-table-column label="真实姓名"  >
        <template slot-scope="scope">
          {{scope.row.realname}}


        </template>
      </el-table-column>
      <el-table-column label="密码"  >
        <template slot-scope="scope">
          {{scope.row.password}}
        </template>
      </el-table-column>
      <el-table-column label="所在医院"  >
        <template slot-scope="scope">
          {{scope.row.hosptial.name}}
        </template>
      </el-table-column>
      <el-table-column label="所在科室"  >
        <template slot-scope="scope">
          {{scope.row.subject}}
        </template>
      </el-table-column>

      <el-table-column label="状态"  >
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status == 0" type="success">可用</el-tag>
          <el-tag v-else type="danger">不可用</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="created_at"
        label="操作"
        width="200"
      >
        <template slot-scope="scope">
          <el-button   v-loading.fullscreen.lock="loading" type="primary" @click="edit(scope.row)" size="mini">编辑</el-button>
          <el-button v-if="scope.row.status == 0" @click="disable(scope.row)" type="danger" size="mini">关闭使用</el-button>
          <el-button v-else type="success" @click="openandclose(scope.row)" size="mini">开放使用</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="pager"
      background
      layout="prev, pager, next"
      :current-page="listQuery.currentpage"
      :page-size="listQuery.pagesize"
      @current-change="fetchData"
      :total="listQuery.total">
    </el-pagination>
  </div>
</template>

<script>
import {searchDoctor, getDoctorList,getHosptialList ,updateDoctor } from "@/api/admin";

export default {
  data() {
    return {
      list: null,
      loading: true,
      hosptiallist:[],
      formInline:{},
      editing:false,
      editmodel:{

      },
      listQuery:{
        currentpage:1,
        pagesize:20,
        name:"",
        total:0,
      }
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    openandclose(e){
      if(e.status == 0 )
        e.status = 1;
      else{
        e.status =0
      }
      updateDoctor(e).then(res=>{
        console.log(res)
      })
    },
    doupdatedoctor(info){
      updateDoctor(this.editmodel).then(res=>{
        console.log(res)
      })
    },
    edit(item) {
      this.editmodel = item;
      this.editing = true;

    },
    fetchData(e) {
      if(e != undefined) this.listQuery.currentpage = e;
      this.loading = true;
      getDoctorList(this.listQuery).then((response) => {
        console.log("get list success")
        this.list = response.info;
        this.listQuery.currentpage = response.currentpage;
        this.listQuery.total = response.total;
        this.listQuery.totalpage = response.totalpage;
        this.loading = false;
      }).catch(err=>{
        this.loading = false;
      })
      getHosptialList({}).then(res=>{
        this.hosptiallist = res.info
      });
    },
    handleClose(done) {
      done();
      this.editing= false;

    },
    dosearch() {
      searchDoctor(this.formInline).then(res=>{
        console.log(res)
        this.list = res.info;
        this.listQuery.currentpage =1 ;
        this.listQuery.total = res.info.length;
        this.listQuery.totalpage = 1;
      })
      console.log(this.formInline);
    },
    disable:function(e){
      if(e.status == 0 )
        e.status = 1;
      else{
        e.status =0
      }
      updateDoctor(e).then(res=>{
        console.log(res)
      })
    }
  },
};
</script>
<style>
.pager{
  margin: 30px;
  float: right;
}
</style>
